<template>
  <div
    class="container"
    v-loading="loading"
    :element-loading-text="loadingText">
    <div class="panel">
      <el-button @click="addRiver_webgl">添加河流三角网</el-button>
      <el-button @click="addRiver_webgl_point">添加10w+点</el-button>
    </div>
    <base-map />
  </div>
</template>

<script setup>
import { onMounted, nextTick, ref, watchEffect, watch } from "vue";

import { Map, View } from "ol";
import { fromLonLat, get, transform } from "ol/proj";
import { Vector as VectorLayer, Layer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import Feature from "ol/feature";
import { Point, LineString, Polygon, Circle } from "ol/geom";
import {
  Style,
  Stroke,
  Fill,
  Circle as CircleStyle,
  Icon,
  Text,
} from "ol/style";

import GeoJSON from "ol/format/GeoJSON.js";

import WebGLVectorLayerRenderer from "ol/renderer/webgl/VectorLayer.js";
import WebGLPointsLayer from "ol/layer/WebGLPoints";
import WebGLVectorLayer from "ol/layer/WebGLVector.js";

import { ElMessage as Message } from "element-plus";

import BJGrid from "@/data/河流三角网/BJ.json";

import { randomPointFeature } from "@/utils/random";

const loading = ref(false);
const loadingText = ref("正在加载...");

function addRiver_webgl() {
  //   console.log(WebGLVectorLayer);
  //   debugger;

  // 读取GeoJSON数据
  const riverMeshFeatures = new GeoJSON().readFeatures(BJGrid, {
    dataProjection: "EPSG:4547",
    featureProjection: "EPSG:4326",
  });

  const riverSource = new VectorSource({
    features: riverMeshFeatures,
  });

  const style = {
    "stroke-color": ["*", ["get", "COLOR"], [220, 0, 0]],
    "stroke-width": 4.5,
    "fill-color": ["*", ["get", "COLOR"], [255, 255, 255, 0.3]],
  };

  //   class WebGLLayer extends Layer {
  //     createRenderer() {
  //       return new WebGLVectorLayerRenderer(this, {
  //         style,
  //       });
  //     }
  //   }

  const riverLayer = new WebGLVectorLayer({
    source: riverSource,
    style,
  });

  window.map.addLayer(riverLayer);

  Message.success("河流三角网添加成功！");
}

function addRiver_webgl_point() {
  loading.value = true;
  loadingText.value = "正在生成10w+点...";

  //生成10w+点

  const features = randomPointFeature(window.map, 100000);

  loading.value = false;

  const pointSource = new VectorSource({
    features,
  });

  // ❌ 错误的样式设置方式
  //   const style = new Style({
  //     image: new CircleStyle({
  //       radius: 5,
  //       fill: new Fill({
  //         color: "rgba(255, 0, 0, 0.5)",
  //       }),
  //       stroke: new Stroke({
  //         color: "#333",
  //         width: 1,
  //       }),
  //     }),
  //   });

  // ✅ 正确的样式设置方式
  let style = {
    "circle-radius": 3,
    "circle-fill-color": "red",
  };

  const pointLayer = new WebGLPointsLayer({
    source: pointSource,
    style,
  });

  window.map.addLayer(pointLayer);

  Message.success("10w+点添加成功！");
}
</script>

<style lang="less" scoped>
.panel {
  position: absolute;
  top: 10px;
  left: 150px;
  z-index: 999;
}
</style>
